<template>
	<view class="loginMain">
		<view class="header">
			<headerView></headerView>
		</view>
		<view class="contentBody">


			<view class="mainContent">
				<view class="header">
					<view @click="showloginView()" u-font-x=12
						:class="[{'loginTitleChioce':isShowLogin},{'loginTitle':!isShowLogin}]">
						登录
					</view>
					<view @click="showRegisterView()"
						:class="[{'registerTitleChoice':isShowRegister},{'registerTitle':!isShowRegister}]">
						注册
					</view>
				</view>
				<text style="text-align: center;margin-top: 20px; color: red; width: 100%;
				display: flex;justify-content: center;" id="errorNt">{{errorMsg}}</text>

				<view class="login_center" v-show="isShowLogin">

					<view class="username">
						<text class="lableText">账号:</text>
						<input type="text" placeholder="请输入账号" class="inputText" v-model="name" />
					</view>
					<view class="password">
						<text class="lableText">密码:</text>
						<input password="true" type=" text" placeholder="请输入密码" class="inputText" v-model="pwd" />
					</view>

				</view>

				<view class="login_footer" v-show="isShowLogin">
					<button type="primary" class="loginBtn" @click="login()">登录</button>
				</view>

				<view class="reg_center" v-show="isShowRegister">

					<view class="username">
						<text class="lableText">账号:</text>
						<input type="text" placeholder="请输入登录账号" class="inputText" v-model="name" />
					</view>
					<view class="password">
						<text class="lableText">密码:</text>
						<input password="true" type="text" placeholder="请输入登录密码" class="inputText" v-model="pwd" />
					</view>
					<view class="password">
						<text class="lableText">确认密码:</text>
						<input password="true" type="text" placeholder="请输入确认密码" class="inputText" v-model="pwd2" />
					</view>

				</view>
				<view class="reg_footer" v-show="isShowRegister" @click="register()">
					<button type="primary" class="loginBtn">用户注册</button>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import headerView from '../header/Headerview.vue'
	import footerView from '../footer/Footer.vue'
	import {
		toLogin
	} from './LoginControl.js'
	import {
		toRegister
	} from './LoginControl.js'
	export default {
		onLoad: function(option) {
			console.log(option.register);
			if (option.register == 1) {
				this.isShowLogin = false;
				this.isShowRegister = true;
			}
		},
		props: {

		},
		components: {
			headerView,
			footerView
		},
		data() {
			return {
				isShowLogin: true,
				isShowRegister: false,
				name: null,
				pwd: null,
				pwd2: null,
				errorMsg: null
			}
		},
		methods: {
			showloginView() {
				this.isShowLogin = true;
				this.isShowRegister = false;
				this.errorMsg = "";
			},
			showRegisterView() {
				this.isShowLogin = false;
				this.isShowRegister = true;
				this.errorMsg = "";
			},
			login() {
				var data = {
					name: this.name,
					pwd: this.pwd,
					setErrorMsg: (msg) => {
						this.errorMsg = msg;
						console.log(this.errorMsg);
					},
					loginSuccess: (res) => {
						// userData.userName = res.data.data.USERNAME;
						// userData.pwd = res.data.data.PASSWORD;
						// userData.uid = res.data.data.USER_ID;
						// userData.ishy = res.data.data.ROLE_ID;
						console.log("res.data.data.ROLE_ID",res.data.data.ROLE_ID);
						this.$PublicData.saveUserdata(res.data.data);
						uni.redirectTo({
							url: '../main/MainView?loginok=1'
						})
						this.$emit("updateView","1111");
					}

				}
				toLogin(data);
			},
			//用户注册
			register() {
				console.log('registerregisterregister')
				var data = {
					name: this.name,
					pwd: this.pwd,
					pwd2: this.pwd2,
					setErrorMsg: (msg) => {
						this.errorMsg = msg;
						console.log(this.errorMsg);
					},
					registerSuccess: (data) => {
						console.log('registerSuccess')
						this.isShowLogin = true;
						this.isShowRegister = false;
						this.$Utils.showToast("注册成功，请登录");
					}

				}
				toRegister(data);
			}
		}

	}
</script>

<style>
	.loginMain {
		display: flex;
		flex-direction: column;
	}

	.login_footer {
		display: flex;
		position: relative;
		margin-bottom: 0rem;
	}

	.contentBody {
		background: #f1f2f3;
		height: 800px;
		width: 100%;
		overflow: hidden;
		background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mainContent {
		border-radius: 10px;
		border: 1px solid #E5E5E5;
		min-width: 500px;
		height: 500px;
		background-color: #fff;
	}

	.header {
		align-items: center;
		display: flex;
		flex-direction: row;
		height: 50px;
		min-width: 200px;
		border-bottom: 1px solid #E5E5E5;
	}

	.login_center {
		display: flex;
		flex-direction: column;
	}

	.loginTitle {

		text-align: center;
		height: 50px;
		line-height: 50px;
		flex-grow: 1;
	}

	.loginTitleChioce {
		background: #E5E5E5;
		text-align: center;
		height: 50px;
		line-height: 50px;
		flex-grow: 1;
	}

	.registerTitle {
		text-align: center;
		flex-grow: 1;
	}

	.registerTitleChoice {
		background: #E5E5E5;
		text-align: center;
		height: 50px;
		line-height: 50px;
		flex-grow: 1;
	}

	.username {
		margin-top: 30px;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.password {
		margin-top: 20px;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.lableText {
		display: flex;
		width: 150px;
		justify-content: flex-end;
		margin-right: 20px;
	}

	.inputText {
		width: 100%;
		padding-left: 5px;
		margin-right: 50px;
		border: 1px solid #E5E5E5;
		display: flex;
		flex-grow: 6;
		height: 45px;
	}

	.loginBtn {
		margin-top: 60px;
		width: 400px;
		text-align: center;
	}
</style>
